import React, { useState, useCallback } from 'react'
import { Card } from 'antd'
import { stat } from 'fs'
import { Button, Row, Col } from 'antd'
import Children from '../../components/children'


const BigContianer = () => {
    const [age, setAge] = useState(18)
    const [score, setScore] = useState(100)
    console.log('father render === ')

    const handleChangeAge = useCallback (() => {
        setAge(age + 1)
    }, [age])

    const handleChangeScore = useCallback (() => {
        setScore(score + 1)
    }, [score])

    return (
        <Card title={`react hooks && Component`} bordered={false} className='special-card'>
            <div>
                <div>{`age && score 数据`}</div>
                <div>age = {age}</div>
                <div>score = {score}</div>
            </div>
            <Row gutter={24} type='flex' style={{margin: 20}}>
                <Col span={4}>
                    <Children onClickButton={handleChangeAge}>改变age</Children>
                </Col>
                <Col span={4}>
                    <Children onClickButton={handleChangeScore}>改变score</Children>
                </Col>
            </Row>
            <div>
              <a target={'_blank'} href={`https://datalanguage.com/blog/graphical-uis-with-svg-and-react-part-1-declarative-graphics`}>React + SVG</a>
            </div>
        </Card>
    )

}
export default BigContianer

// class BigContianer extends React.Component<IProps>{
//     constructor(props: IProps) {
//         super(props)
//         this.state = {
//             people: {name: 'zll', age: 18, sex: 'female'},
//             value: 10,
//         }
//       };
//     handleOnClickState = () => {
//         this.setState({ people: {name: 'newzll', age: 20} })
//     }
//     handleOnClickValue = () => {
//         const { value } = this.state
//         this.setState({ value: value + 1 })
//     }
//     render() {
//         const { value, people} = this.state
//         console.log('father render === ', people, value)
//         return (
//             <Card title={'react hooks && Component'} bordered={false} className='special-card'>
//                 <div>
//                     <div>state数据展示</div>
//                     <div>people.name = {people.name}, people.age = {people.age}, people.sex = {people.sex} </div>
//                     <div>value = {value} </div>
//                 </div>
//                 <Row gutter={24} type='flex' style={{margin: 20}}>
//                 <Col span={4}>
//                         <Button type="primary" onClick={this.handleOnClickState}>测试state</Button>
//                     </Col>
//                     <Col span={4}>
//                         <Button type="primary" onClick={this.handleOnClickValue}>测试value</Button>
//                     </Col>
//                 </Row>
//                 <Children value={value}/>
//             </Card>
//         )
//     }
// }
// export default BigContianer
